<template>
  <el-row class="container">
    <el-col :span="24">
        <el-row class="shotBox" >
           <!-- <el-col class="shotSelect" :xs="12" :sm="6" :md="6" v-for="(item,index) in classList" :key="item.ftid" v-if="index<=3?true:false">
                <h1>{{item.name}}</h1>
                <ul >
                    <li v-for="ditem in item.foods" :key="ditem.fid"><router-link :to="{name: 'Foodlist', params: {fid: ditem.fid}}" :class="fid==ditem.fid?'chosed':''" >{{ditem.name}}</router-link></li>
                </ul>
            </el-col> -->
        </el-row>
      </el-col>
      <el-col :span="24">
          <el-row :gutter="20" class="temCard">
            <el-col class="cardCol el-col-xxs-24" :xs="8" :sm="6" :md="6"  v-for="item in temCardList" :key="item.id" v-if="temCardList.length>0?true:false" >
              <el-card :body-style="{ padding: '0px' }">
                  <router-link class="imgBox" :to="{name: 'Itemlist', params: {foodId: item.cookbookList.cbid}}" target="_blank">
                      <img :src="item.cookbookList.finalcook" class="image">
                  </router-link>
                <div class="inner" style="padding: 15px;">
                  <router-link class="title" :to="{name: 'Itemlist', params: {foodId: item.cookbookList.cbid}}" target="_blank">{{item.cookbookList.cbname}}</router-link>
                  <div class="bottom clearfix">
                    <span><label class="el-icon-view"></label> {{item.cookbookList.pageview}}</span>
                    <span><label class="el-icon-star-on"></label> {{item.cookbookList.staroffs.length}}</span>
                  </div>
                  <div class="photo">
                      <img :src="item.cookbookList.user.headimage"  onerror="this.onerror=null;this.src='../../assets/img/tou.png'">
                      <p>{{item.cookbookList.user.petname}}</p>
                  </div>
                </div>
              </el-card>
            </el-col>

          </el-row>
          <div v-show="hasMore"  class="addMore" @click="addMoreFun">
              <p>点击加载更多</p>
          </div>
          <div v-show="!hasMore" class="noMore" >
              没有更多数据
          </div>
      </el-col>
  </el-row>
</template>

<script>
import FoodApi from '@/networks/api'

import axios from 'axios'
// console.log(classList) classList, IndexShowList, searchShowList
export default {
  data () {
    // 选项 / 数据
    return {
      classList: '', // 分类
      temCardList: [], // 最新列表
      pageId: 0, // 当前ID号
      fid: 0, // 分类id
      //keywords: '', // 关键词
      hasMore: false // 是否还有更多
    }
  },
   metaInfo: {
    title: '美食列表'
  },
  computed: {
    // console.log(1111);
  },
  methods: {
    // 事件处理器
    getCookBook:function(){
      //如果在生命周期函数中，会使得在路由变化的时候不能拿到最新的值
      if(this.$route.params.fid != undefined){  // 如果没有带参数
        this.fid = this.$route.params.fid
      }

      var url = '/api/consumer-index/index_consumer/getCookBookByFid?fid=' + this.fid + '&pageId=' + this.pageId
console.log(url)
      axios.get(url).then(res => {

        this.temCardList = res.data
        console.log(res.data)
        if(res.data.length > 8){
          this.hasMore = !this.hasMore
        }
      })
    },
    addMoreFun:function(){

       this.pageId += 8 // 要变还的增长
      var url = '/api/consumer-index/index_consumer/getCookBookByFid?fid=' + this.fid + '&pageId=' + this.pageId

      axios.get(url).then(res => {
        this.temCardList.push(res.data)
        console.log(res.data)
        if(res.data.length < 8){
          this.hasMore = !this.hasMore
        }
      })

    }

  },
 watch: {
    // 如果路由有变化，会再次执行该方法
    '$route': 'getCookBook'

  },
  components: {
  },
  async created() {
    console.log(this.$route.params.sort)
        // this.fid = this.$route.params.fid

     //查询分类
      var url = '/api/consumer-index/index_consumer/getAllSort'
        axios.get(url).then(res => {
        console.log(res.data)
        this.classList = res.data

         //获得相关的菜谱
        this.getCookBook()
    })
  },



}
</script>

<style>
/**********快捷分类列表***********/
.shotBox {
  /*padding:30px 0;*/
  margin-bottom: 35px;
  background: #f4f0ec;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
.shotSelect {
  border-right: 1px dotted #e4e4e4;
  margin: 30px 0;
  min-height: 120px;
  /*padding:0 10px;*/
  /*padding:4px 0 0 15px;*/
}
.shotSelect:last-child {
  border-right: 1px solid transparent;
}
.shotSelect h1 {
  text-align: center;
  line-height: 150%;
  margin-bottom: 7px;
}
.shotSelect ul li:hover a,
.shotSelect ul li a.chosed {
  background: #a37011;
  color: #fff;
}

.item {
  padding: 3px 0;
  /*line-height: 20px;*/
  /*height:20px;*/
}

.shotSelect ul {
  /*min-height: 120px;*/
  text-align: center;
}
.shotSelect ul li {
  display: inline-block;
}
.shotSelect ul li a {
  display: inline-block;
  padding: 4px 8px;
  margin: 2px;
  /*line-height: 28px;*/
  text-align: center;
}
/**********菜谱列表**************/
.temCard .cardCol {
  margin-bottom: 20px;
}
.temCard .time {
  font-size: 13px;
  color: #999;
}
.temCard .inner {
  position: relative;
}
.temCard .photo {
  position: absolute;
  right: 15px;
  top: -14px;
  text-align: center;
  overflow: hidden;
  font-size: 12px;
  color: #6a6a6a;
  width: 82px;
}
.temCard .photo img {
  background: #fff;
  width: 46px;
  height: 46px;
  border: 2px solid #fff;
  border-radius: 50%;
  /*padding:5px;*/
}

.temCard .bottom {
  margin-top: 12px;
  line-height: 12px;
}
.temCard .bottom span {
  font-size: 12px;
  color: #6a6a6a;
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-right: 10px;
}

.temCard .button {
  padding: 0;
  float: right;
}
.temCard .imgBox {
  width: 100%;
  height: 200px;
  cursor: pointer;
  display: block;
  border-radius: 4px;
}
.temCard .image {
  /*max-width: 100%;*/
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*display: inline-block;*/
  /*display: block;*/
}
.temCard .title {
  cursor: pointer;
  font-size: 16px;
  color: #333;
}
.addMore {
  text-align: center;
  height: 50px;
  background: #ffcc66;
  border-radius: 3px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
.addMore p {
  line-height: 50px;
  color: #a37011;
  font-weight: bold;
  letter-spacing: 3px;
  font-size: 16px;
  cursor: pointer;
}
.noMore {
  text-align: center;
  height: 50px;
  line-height: 50px;
}
</style>
